<template>
	<view class="dati">
		<view class="status_bar">
		</view>
		<view class="yujing-word1">
		<image src="../../../static/yujing/back.png" mode="" @click="to_shouye"></image>
			<view class="word1-word">
				答题中
			</view>
		</view>
		<view class="dati-box" >
			<view class="dati-nav">
				{{dat[index].timu}}
			</view>
			<view class="dati-content">
				{{dat[index].content}}
			</view>
			<view class="dati-a" :class="coloa?'colors':''" @click="to_tijiaoa()">
				{{dat[index].choicea}}
			</view>
			<view class="dati-b" :class="colob?'colors':''" @click="to_tijiaob()">
				{{dat[index].choiceb}}
			</view>
			<view class="dati-c" :class="coloc?'colors':''" @click="to_tijiaoc()">
				{{dat[index].choicec}}
			</view>
			<view class="dati-d" :class="colod?'colors':''" @click="to_tijiaod()" >
				{{dat[index].choiced}}
			</view>
			<button @click="to_panduan()">
				下一题
			</button>
			<view class="dati-box2" v-bind:class="{active:isactive}">
				<view class="dati-word2">
					答题结果公布
				</view>
				<view class="dati-word">
					恭喜您答对45题，获得90分
				</view>
				<view class="dati-word3" @click="to_shouye()">
					 返回首页
				</view>
				<navigator url="/pages/shouye/anniu/xinli">
					<view class="dati-word4" @click="xinli()">
						 再答一次
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				score:0,
				coloa:false,
				colob:false,
				coloc:false,
				colod:false,
				dat:[],
				isactive:true
			}
		},
		mounted() {
			let that=this
			uni.request({
				url:'http://127.0.0.1:8080/tikudata/tikudatalist',
				method: 'GET',
				dataType:'json',
				data: {
				
				},
				header: {
					// 'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					console.log(res.data.data);
					that.dat = res.data.data;
					console.log(that.dat);
				}
			})
		},
		methods: {
			to_shouye(){
				uni.navigateTo({
					url:"./xinli"
				})
			},
			to_panduan(){
				this.index++;
				this.score=this.score+2;
				this.coloa=false;
				this.colob=false;
				this.coloc=false;
				this.colod=false;
				if(this.index==49){
					this.isactive=!this.isactive;
				}
			},
			to_tijiaoa(){
				this.coloa=!this.coloa;
			},
			to_tijiaob(){
				this.colob=!this.colob;
			},
			to_tijiaoc(){
				this.coloc=!this.coloc;
			},
			to_tijiaod(){
				this.colod=!this.colod;
			},
			to_shouye(){
				uni.switchTab({
					url:"../shouye"
				})
			},
			
		}
	}
</script>

<style>
	page {
		background-image: url(@/static/yujing/yujingbg.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
		
	}
	*{
		padding: 0%;
		margin: 0%;
	}
	image{
		display: flex;
	}
	.yujing-word1{
		width: 90%;
		height: 100rpx;
		margin: auto;
		margin-top: 40rpx;
		position: relative;
		
	}
	.word1-word{
		color: white;
		font-size: 40rpx;
		text-align: center;
		letter-spacing: 15rpx;
		
	}
	.yujing-word1 image{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dati-box{
		width: 90%;
		height: 1000rpx;
		margin: auto;
		margin-top: 70rpx;
		font-weight: bold;	
		background-color: white;
		position: relative;
	}
	.dati-nav{
		
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
	}
	.dati-content{
		width: 100%;
		height: 300rpx;
		
		line-height: 50rpx;
	}
	.dati-a{
		width: 100%;
		height: 130rpx;
	}
	.dati-b{
		width: 100%;
		height: 130rpx;
		
	}
	.dati-c{
		width: 100%;
		height: 130rpx;
		
	}
	.dati-d{
		width: 100%;
		height: 130rpx;
		
	}
	.dati-box button{
		width: 300rpx;
		margin:  auto;
		background-color: #3069ad;
		color: white;
		border-radius: 30rpx;
	}
	.colors{
		color: #00ffff;
	}
	.dati-box2{
		width: 600rpx;
		height: 320rpx;
		border-radius: 30rpx;
		background-color: #3069ad;
		position: absolute;
		top: 200rpx;
		left: 45rpx;
		color: white;
		font-weight: 500;
	}
	.active{
		display: none;
	}
	.dati-word{
		font-size: 35rpx;
		position: absolute;
		top: 125rpx;
		left: 90rpx;
	}
	.dati-word2{
		font-weight: bold;
		font-size: 40rpx;
		position: absolute;
		top:30rpx;
		left: 175rpx;
	}
	.dati-word3{
		width:140rpx;
		height: 70rpx;
		box-shadow: #ccc 5rpx 5rpx;
		background-color: white;
		color: black;
		border-radius: 30rpx;
		line-height: 70rpx;
		text-align: center;
		position: absolute;
		bottom: 45rpx;
		left: 50rpx;
		font-size: 25rpx;
	}
	.dati-word4{
		width: 140rpx;
		height: 70rpx;
		box-shadow: #ccc 5rpx 5rpx;
		background-color: white;
		color: black;
		border-radius: 30rpx;
		line-height: 70rpx;
		text-align: center;
		position: absolute;
		bottom: 45rpx;
		right:50rpx;
		font-size: 25rpx;
	}
</style>